<template>
  <keep-alive v-if="data.currTabComp">
    <component :is="data.currTabComp" :key="props.path" />
  </keep-alive>
</template>
<script setup lang="ts" name="DynamicLink">
import { deepClone } from "@/utils/util";
import { useMessage } from "@/hooks/message";

const emits = defineEmits(["submit"]);

const props = defineProps({
  id: {
    type: String,
    default: ""
  },
  path: {
    type: String,
    default: ""
  },
  currJob: {
    type: Object,
    default: null
  },
  currElTab: {
    type: Object,
    default: null
  }
});

const comp = shallowRef(null);

const data = reactive({
  currTabComp: comp
});

function handLoader() {
  if (!props.path) {
    data.currTabComp = null;
    useMessage().error("不存在的页面，请检查");
    return;
  }
  data.currTabComp = defineAsyncComponent(() => import(`@/${props.path}`));
}

function handleJob(jobBtn) {
  emits("submit", jobBtn);
}

// 监听双向绑定
watch(
  () => props.path,
  val => {
    data.currTabComp = null;
    handLoader(); // 重载
  }
);

onMounted(() => {
  // 初始化
  if (props.path) handLoader();
});
</script>
